<template>
	<div class="JiaoYiQK-common-layout">
		<el-container>
			<el-header class="JiaoYiQK-Header">
				<div class="JiaoYiQK-Header-1">
					交易情况
				</div>
				<div class="JiaoYiQK-Header-2">
					<el-date-picker v-model="cs" type="daterange" range-separator="至"
						start-placeholder="Start date" end-placeholder="End date"/>
				</div>
			</el-header>
			<el-main class="JiaoYiQK-Main">
				<div class="JiaoYiZongSu">
					<span style="margin-right: 45px;">总金额</span><br />
					<span style="font-weight: bold;font-size: 23px;">897.26</span>
				</div>
			</el-main>
			<el-footer class="JiaoYiQK-Footer">
				<div class="JiaoYiQK-Footer-1">
					<span>物业费</span><br />
					<span style="color: #E4514E;font-weight: bold;font-size: 20px;">897.26</span>
				</div>
				<div class="JiaoYiQK-Footer-2">
					<span>工单金额</span><br />
					<span style="color: #F09A50;font-weight: bold;font-size: 20px;">0.00</span>
				</div>
				<div class="JiaoYiQK-Footer-3">
					<span>预存充值金额</span><br />
					<span style="color: #11BC67;font-weight: bold;font-size: 20px;">0.00</span>
				</div>
				<div class="JiaoYiQK-Footer-4">
					<span>其他收入</span><br />
					<span style="color: #4759A1;font-weight: bold;font-size: 20px;">0.00</span>
				</div>
			</el-footer>
		</el-container>
	</div>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	const cs = ref([new Date("2024-07-01"),new Date("2024-07-07")])
	
	
	
</script>

<style scoped>
	.JiaoYiQK-common-layout {
		width: 1390px;
		background-color: white;
		border-radius: 10px;
		margin-top: 20px;
		margin-left: 10px;
		padding-bottom: 40px;
	}
	.JiaoYiQK-Header{
		height: 40px;
		display: flex;
		justify-content: space-between;
	}
	.JiaoYiQK-Header-1{
		margin-top: 20px;
		font-weight: bold;
	}
	.JiaoYiQK-Header-2{
		margin-top: 20px;
	}
	.JiaoYiQK-Main{
		background-color: #FAFAFA;
		width: 1360px;
		margin-left: 20px;
		margin-top: 20px;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	.JiaoYiZongSu{
		float: left;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.JiaoYiQK-Footer{
		display: flex; 
		justify-content: space-between;
	}
	.JiaoYiQK-Footer>div{
		width: 320px;
		height: 65px;
		background-color: #FAFAFA;
		margin-top: 20px;
		flex-direction: row; /* 水平排列 */
		align-items: center; /* 垂直居中对齐 */
	}
	
</style>